<template>
  <div class="library-container">
    <!-- 热门标签 -->
    <div class="library-tags">
      <view-hot />
    </div>

    <!-- 搜索区域 -->
    <div class="library-search">
      <div class="search-wrapper">
        <el-input placeholder="站内搜索" v-model="p.search" size="medium" clearable class="search-input"
          :loading="searchLoading" aria-label="站内搜索">
        </el-input>
      </div>
      <div class="rsr-slot-wrapper">
        <view-slot />
      </div>
    </div>

    <!-- 广告位 -->
    <view-ads spaceCode="ADS_1"></view-ads>

    <!-- 资源列表 -->
    <div class="library-resources">
      <div class="filter-wrapper">
        <el-select v-model="p.category" placeholder="请选择分组" clearable class="filter-item">
          <el-option v-for="(k, v) in dims.RESOURCE_CATEGORY" :key="v" :label="k" :value="v" />
        </el-select>
        <el-select v-model="p.type" placeholder="请选择资源类型" clearable class="filter-item">
          <el-option v-for="(k, v) in options" :key="v" :label="k" :value="v">
          </el-option>
        </el-select>
        <el-select v-model="p.tag" placeholder="请选择标签" clearable class="filter-item">
          <el-option v-for="(k, v) in dims.TAGS" :key="v" :label="k" :value="v">
          </el-option>
        </el-select>
      </div>
      <div class="resources-box">
        <view-panel v-for="(sitem, sindex) in dataList" :items="sitem" :key="sindex" />
      </div>
    </div>
  </div>
</template>

<script>
import viewAds from "@/components/ads";
import viewSlot from "@/components/board-slot";
import viewPanel from "@/components/board-rsr";
import viewHot from '@/components/board-hots';
import optionsFunc from '@/mixins/resource-options';
import resourceFunc from '@/mixins/rsr-slot';
export default {
  components: {
    viewAds,
    viewSlot,
    viewPanel,
    viewHot
  },
  data() {
    return {
      // 查询参数
      p: {
        search: null,
        tag: null,
        category: null,
        type: null
      },
      // 字典
      dims: sa.$sys.getCurd(),
      // 数据
      dataList: null,
      // 类型
      options: null,
      // 是否有筛选条件
      hasFilters: false,
      // 资源分类
      oldCategory: null,
      // 搜索加载状态
      searchLoading: false
    };
  },
  mixins: [optionsFunc, resourceFunc],
  created: function () {
    // 查询所有资源类型
    this.getOptions()
    // 分组
    this.f5()

    // 访问量
    this.visits()
  },
  watch: {
    p: {
      handler: function (newValue) {
        // 检查是否有筛选条件
        this.hasFilters = !!newValue.tag || !!newValue.category || !!newValue.type;
        if (newValue.category !== this.oldCategory) {
          this.oldCategory = newValue.category
          this.p.type = null
          this.options = null
          this.getOptions(newValue.category)
        }
        this.f5()
      },
      // 表示监听对象内部属性的变化
      deep: true
    }
  },

  methods: {
    // 获取资源数据
    f5() {
      if (this.p.category || this.p.type || this.p.tag) {
        this.hasFilters = true
      }
      sa.ajax('/rsr/getSearch', sa.removeNull(this.p), function (res) {
        if (res.code === 200) {
          this.dataList = res.data
        }
      }.bind(this), {
        type: 'post'
      });
    },

    // 增加访问量
    visits() {
      sa.ajax('/visits/add', function (_res) { }.bind(this), {
        type: 'get'
      });
    },

    // 重置所有筛选条件
    resetFilters() {
      this.p = {
        tag: null,
        category: null,
        type: null
      }
      this.hasFilters = false
    },
  }
};
</script>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';
@import './index.css';

::v-deep .el-input__inner {
  height: 36px !important;
  line-height: 36px !important;
  padding: 0 32px 0 12px;
  min-width: 260px;
  border-radius: 24px;

  &:hover {
    border-color: var(--primary-color);
  }

  &:focus {
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
  }
}

::v-deep .el-input__icon {
  line-height: 36px !important;
}

::v-deep .el-input__prefix {
  left: 12px;
  color: #909399;
  transition: color var(--transition-duration) ease;

  .svg-icon {
    width: 18px;
    height: 18px;
  }

  &:hover {
    color: var(--primary-color);
    transform: scale(1.1);
  }
}

.ads-control {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 1;
}

.ads-toggle-btn {
  padding: 5px;
  color: #666;

  &:hover {
    color: var(--primary-color);
  }
}
</style>
